<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!--<meta http-equiv="Refresh" content="3; url=">-->
    <meta name="description" content="LayoutIt">
    <title>综合管理平台</title>

    <!-- 核心样式开始 -->
    <link href="css/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/77-fonts.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/css/jquery-ui.min.css">
    <link rel="stylesheet" href="./css/css/jquery.mCustomScrollbar.css">
    <link rel="stylesheet" href="./css/css/jquery.datetimepicker.css">

    <link rel="stylesheet" href="./css/base.css">
    <link title="blue" href="css/blue.css" rel="stylesheet">
    <link title="purpleBlue" href="css/purpleBlue.css" rel="stylesheet" disabled="disabled">
    <link title="golden" href="css/golden.css" rel="stylesheet" disabled="disabled">
    <!--核心样式结束-->

    <link rel="stylesheet" href="./css/index_server_details.css">

    <!-- Fav and touch fa fas -->
    <link rel="shortcut icon" href="image/favicon.ico">

    <!--核心js文件开始-->
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="js/js/html5shiv.js"></script>
    <![endif]-->
    <script type="text/javascript" src="js/js/jquery-2.1.4.min.js"></script>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="js/js/jquery-1.12.0.min.js"></script>
    <![endif]-->
    <script type="text/javascript" src="js/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/js/jquery-ui.js"></script>
    <script type="text/javascript" src="js/js/jquery.ui.touch-punch.min.js"></script>
    <script src="./js/js/jquery.cookie.js"></script>
    <script src="./js/js/jquery.mCustomScrollbar.concat.min.js"></script>
    <script src="./js/js/jquery.datetimepicker.js"></script>
    <script src="./js/common.js"></script>
    <!--核心js文件结束-->
    <script src="js/js/gauge.js"></script>

    <script type="text/javascript" src="js/index_server_details.js"></script>
    <script type="text/javascript" src="js/nav.js"></script>
    <script type="text/javascript" src="js/js/echarts.min.js"></script>
</head>

<body style="cursor: auto; overflow: hidden;" class="edit">
<div class="container-fluid">
    <div class="row-fluid">
        <!-- 菜单栏开始 BEGIN SIDEBAR MENU -->
        <div class="">
            <div class="sidebar-nav">

                <!-- 侧边按钮开始 BEGIN SIDEBAR TOGGLER BUTTON -->
                <div class="clearfix">
                    <div class="sidebar-toggler hidden-phone zoom-out" id="devpreview1"><i
                            class="fa fa-angle-left fa-2x"></i></div>
                </div>
                <!-- 侧边按钮结束 BEGIN SIDEBAR TOGGLER BUTTON -->

                <!-- 响应快速搜索表单开始 BEGIN RESPONSIVE QUICK SEARCH FORM -->
                <form class="sidebar-search">
                    <div class="input-box">
                        <a href="javascript:;" class="remove"></a>
                        <input type="text" placeholder="Search..."/>
                        <div class="submit"><i class="fa fa-search"></i></div>
                    </div>
                </form>
                <!-- 响应快速搜索表单结束 END RESPONSIVE QUICK SEARCH FORM -->

                <ul class="nav nav-list accordion-group bg-color">
                    <li class="nav-header">
                        <a href="index.html"><i class="i-732"></i><span class="title">首页</span></a>
                    </li>
                </ul>
                <ul class="nav nav-list accordion-group">
                    <li class="nav-header">
                        <a href="servers.html"><i class="fa-server fa"></i><span class="title">服务器</span></a>
                    </li>
                    <li style="display: none" class="rows" id="estRows">
                        <div class="lyrow large ui-draggable" index="0">
                            <a href="#close" class="remove label label-important"><i
                                    class="fa fa-remove fa fa-white"></i></a>
                            <span class="drag label">深圳</span>
                            <div class="view">
                                <div class="row-fluid clearfix">
                                    <div class="span12 column">
                                        <div class="viewHead">
                                            <div class="crowd">吞吐量(流入和流出)</div>
                                            <div class="begin">
                                                <input type="text" name="begin" class="dtpicker">
                                            </div>
                                            <div class="end">
                                                <input type="text" name="end" class="dtpicker">
                                            </div>
                                            <div class="lastHour">最近一小时</div>
                                            <div class="submit">
                                                <i class="fa fa-check"></i>
                                                <input type="hidden" name="">
                                                <input type="hidden" name="">
                                            </div>
                                        </div>
                                        <iframe class='model-data' src=""></iframe>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="lyrow large ui-draggable" index="1">
                            <a href="#close" class="remove label label-important"><i
                                    class="fa fa-remove fa fa-white"></i></a>
                            <span class="drag label">广州</span>
                            <div class="view">
                                <div class="row-fluid clearfix">
                                    <div class="span12 column">
                                        <div class="viewHead">
                                            <div class="crowd">吞吐量(流入和流出)</div>
                                            <div class="begin">
                                                <input type="text" name="begin" class="dtpicker">
                                            </div>
                                            <div class="end">
                                                <input type="text" name="end" class="dtpicker">
                                            </div>
                                            <div class="lastHour">最近一小时</div>
                                            <div class="submit">
                                                <i class="fa fa-check"></i>
                                                <input type="hidden" name="">
                                                <input type="hidden" name="">
                                            </div>
                                        </div>
                                        <iframe class='model-data' src=""></iframe>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="lyrow large ui-draggable" index='2'>
                            <a href="#close" class="remove label label-important"><i
                                    class="fa fa-remove fa fa-white"></i></a>
                            <span class="drag label">香港</span>
                            <div class="view">
                                <div class="row-fluid clearfix">
                                    <div class="span12 column">
                                        <div class="viewHead">
                                            <div class="crowd">吞吐量(流入和流出)</div>
                                            <div class="begin">
                                                <input type="text" name="begin" class="dtpicker">
                                            </div>
                                            <div class="end">
                                                <input type="text" name="end" class="dtpicker">
                                            </div>
                                            <div class="lastHour">最近一小时</div>
                                            <div class="submit">
                                                <i class="fa fa-check"></i>
                                                <input type="hidden" name="">
                                                <input type="hidden" name="">
                                            </div>
                                        </div>
                                        <iframe class='model-data' src=""></iframe>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="lyrow large ui-draggable" index="3">
                            <a href="#close" class="remove label label-important"><i
                                    class="fa fa-remove fa fa-white"></i></a>
                            <span class="drag label">澳门</span>
                            <div class="view">
                                <div class="row-fluid clearfix">
                                    <div class="span12 column">
                                        <div class="viewHead">
                                            <div class="crowd">吞吐量(流入和流出)</div>
                                            <div class="begin">
                                                <input type="text" name="begin" class="dtpicker">
                                            </div>
                                            <div class="end">
                                                <input type="text" name="end" class="dtpicker">
                                            </div>
                                            <div class="lastHour">最近一小时</div>
                                            <div class="submit">
                                                <i class="fa fa-check"></i>
                                                <input type="hidden" name="">
                                                <input type="hidden" name="">
                                            </div>
                                        </div>
                                        <iframe class='model-data' src=""></iframe>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
                <ul class="nav nav-list accordion-group">
                    <li class="nav-header">
                        <a href="topology.html"><i class="i-750"></i><span class="title">业务拓扑</span></a>
                    </li>
                </ul>
                <ul class="nav nav-list accordion-group">
                    <li class="nav-header">
                        <a href="report.html"><i class="i-712"></i><span class="title">服务质量报告</span></a>
                    </li>
                </ul>
                <ul class="nav nav-list accordion-group">
                    <li class="nav-header">
                        <a href="users.html"><i class="i-759"></i><span class="title">用户设置</span></a>
                    </li>
                </ul>
                <ul class="nav nav-list accordion-group">
                    <li class="nav-header">
                        <i class="i-761 i-spin"></i>
                        <span class="title">应用扩展</span>
                    </li>
                    <li style="display: none;" class="rows mute" id="elmComm">
                        <div class="preview">建设中...</div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 菜单栏结束 END SIDEBAR MENU -->
        <!-- 视图区域开始 -->
        <div id="content-md">
            <div class="viewArea">
                <div class="viewArea-h">广州健康报告</div>
                <div class="viewArea-c">
                    <div class="v-top clearfix">
                        <div class="btn-group pull-left">
                            <a id="drop1" href="#" role="button" class="btn btn-default dropdown-toggle"
                               data-toggle="dropdown">广州 <b class="caret"></b></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">广州</a></li>
                                <li><a href="#">深圳</a></li>
                                <li><a href="#">香港</a></li>
                                <li><a href="#">澳门</a></li>
                                <!--<li class="divider"></li>-->
                                <!--<li><a tabindex="-1" href="#">Separated link</a></li>-->
                            </ul>
                        </div>
                        <a href="index.html" class="btn btn-default pull-right"><span class="back fa fa-angle-left">&nbsp;&nbsp;返回</span></a>
                    </div>
                    <div class="v-bottom clearfix">
                        <div id="myChart" style="width: 100%;height: 300px;"></div>
                        <div class="table-responsive">
                            <table class="table table-hover table-bordered">
                                <thead>
                                <tr>
                                    <th><span class="pull-left">IP地址</span><span
                                            class="fa-plus-square-o fa fa-2x pull-right add"></span></th>
                                    <th class="red-alarm">总吞吐量</th>
                                    <th class="yelllow-alarm">吞吐量流出</th>
                                    <th class="yelllow-alarm">吞吐量流入</th>
                                    <th>服务器响应时间</th>
                                    <th>总连接建立时间</th>
                                    <th>连接建立时间(客)</th>
                                    <th>连接建立时间(服)</th>
                                    <th>总请求数</th>
                                    <th>成功请求次数</th>
                                    <th>失败请求次数</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>主机</td>
                                    <td class="red-alarm">100M</td>
                                    <td class="yelllow-alarm">50M</td>
                                    <td>50M</td>
                                    <td>1000ms</td>
                                    <td>10ms</td>
                                    <td>5ms</td>
                                    <td>5ms</td>
                                    <td>1000次</td>
                                    <td>999次</td>
                                    <td>1次</td>
                                </tr>
                                <tr>
                                    <td>192.168.111.111</td>
                                    <td class="red-alarm">100M</td>
                                    <td class="yelllow-alarm">50M</td>
                                    <td>50M</td>
                                    <td>500ms</td>
                                    <td>10ms</td>
                                    <td>5ms</td>
                                    <td>5ms</td>
                                    <td>1000次</td>
                                    <td>999次</td>
                                    <td>1次</td>
                                </tr>
                                <tr>
                                    <td>192.168.111.111</td>
                                    <td>100M</td>
                                    <td class="yelllow-alarm">50M</td>
                                    <td>50M</td>
                                    <td>1000ms</td>
                                    <td>10ms</td>
                                    <td>5ms</td>
                                    <td>5ms</td>
                                    <td>1000次</td>
                                    <td>999次</td>
                                    <td>1次</td>
                                </tr>
                                <tr>
                                    <td>192.168.111.111</td>
                                    <td>100M</td>
                                    <td>50M</td>
                                    <td class="yelllow-alarm">50M</td>
                                    <td>1000ms</td>
                                    <td>10ms</td>
                                    <td>5ms</td>
                                    <td>5ms</td>
                                    <td>1000次</td>
                                    <td>999次</td>
                                    <td>1次</td>
                                </tr>
                                <tr>
                                    <td>192.168.111.111</td>
                                    <td>100M</td>
                                    <td>50M</td>
                                    <td class="yelllow-alarm">50M</td>
                                    <td>1000ms</td>
                                    <td>10ms</td>
                                    <td>5ms</td>
                                    <td>5ms</td>
                                    <td>1000次</td>
                                    <td>999次</td>
                                    <td>1次</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="v-footer">
                        <ul class="pagination pull-right">
                            <li><a href="#">&laquo;</a></li>
                            <li class="active"><a href="#">1</a></li>
                            <li class="disabled"><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li><a href="#">&raquo;</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- 视图区域结束 -->
    </div>
</div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('myChart'));

    // 指定图表的配置项和数据
    option = {
        title: {
            text: '广州'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['服务器响应时间']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '服务器响应时间',
                type: 'line',
                stack: '总量',
                data: [120, 132, 101, 134, 90, 230, 210]
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.onresize = function () {
        myChart.resize();
    }
</script>
<!--<div class="footer" style="text-align:center;">-->
<!--<p>From:<a href="http://182.92.168.13/" target="_blank">77Element</a></p>-->
<!--</div>-->


</body>
</html>